import React, { PureComponent } from 'react';
import moment from 'moment';
import { Table, Button } from 'antd';
import styles from './index.less';

class AidTable extends PureComponent {
  state = {
    selectedRowKeys: [],
  };

  componentWillReceiveProps(nextProps) {
    // clean state
    if (nextProps.selectedRows.length === 0) {
      this.setState({
        selectedRowKeys: [],
        // totalCallNo: 0,
      });
    }
  }

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    // const totalCallNo = selectedRows.reduce((sum, val) => {
    //   return sum + parseFloat(val.callNo, 10);
    // }, 0);

    if (this.props.onSelectRow) {
      this.props.onSelectRow(selectedRows);
    }

    this.setState({ selectedRowKeys });
  }

  handleTableChange = (pagination, filters, sorter) => {
    this.props.onChange(pagination, filters, sorter);
  }

  cleanSelectedKeys = () => {
    this.handleRowSelectChange([], []);
  }
  render() {
    const { selectedRowKeys } = this.state;
    const { data: { content, totalElements, size, number }, loading } = this.props;
    const { onEdit } = this.props;

    // const handleButtonClick = (e) => {
    //   message.info('Click on left button.');
    //   console.log('click left button', e);
    //   onShowHistory(true, e.key);
    // };
    //
    // const handleMenuClick = (record, e) => {
    //   message.info('Click on menu item.');
    //   console.log('click', e);
    //   console.log('click', record);
    //   if (e.key === '1') {
    //     onEdit(true, record);
    //   } else if (e.key === '2') {
    //     confirm({
    //       title: 'Are you sure delete this record?',
    //       onOk() {
    //         onPay(record.id);
    //       },
    //     });
    //   }
    // };
    // const handleStart = (e, record) => {
    //   message.info('start');
    //   console.log(record);
    // };
    const handleEdit = (e, record) => {
      onEdit(e, record);
    };
    // const handleStop = (e, record) => {
    //   message.info('stop');
    //   console.log(record);
    // };

    const columns = [
      {
        title: '编号',
        dataIndex: 'id',
      },
      {
        title: '效果渠道名称',
        dataIndex: 'name',
      },
      {
        title: '类型',
        dataIndex: 'aidType',
        // sorter: true,
        // align: 'right',
        // render: val => `${val} 万`,
      },
      {
        title: '状态',
        dataIndex: 'enable',
        render(val) {
          return val ? '启动' : '暂停';
        },
      },
      // {
      //   title: '状态',
      //   dataIndex: 'status',
      //   filters: [
      //     {
      //       text: status[0],
      //       value: 0,
      //     },
      //     {
      //       text: status[1],
      //       value: 1,
      //     },
      //     {
      //       text: status[2],
      //       value: 2,
      //     },
      //     {
      //       text: status[3],
      //       value: 3,
      //     },
      //   ],
      //   // render(val) {
      //   //   return <Badge status={statusMap[val]} text={status[val]} />;
      //   // },
      // },
      {
        title: '创建时间',
        dataIndex: 'createAt',
        sorter: true,
        render: val => <span>{moment(val).format('YYYY-MM-DD')}</span>,
      },
      {
        title: '操作',
        render: (text, record) => {
          return (
            <div>
              <Button onClick={e => handleEdit(e, record)}>编辑</Button>
            </div>
          );
        },
      },
    ];

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      total: totalElements,
      pageSize: size,
      current: parseInt(number, 10) + 1 || 1,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <div className={styles.standardTable}>
        <Table
          loading={loading}
          rowKey={record => record.key}
          rowSelection={rowSelection}
          dataSource={content}
          columns={columns}
          pagination={paginationProps}
          onChange={this.handleTableChange}
        />
      </div>
    );
  }
}

export default AidTable;
